<template>
  <div class="app-container">
    <!--    上传地址 action-->
    <el-form>
      <el-form-item label="描述信息:  ">
        <el-tag type="info">该模板用于展示数据示例</el-tag>
        <el-tag class="border-radius: 0px">
          <i class="el-icon-download"></i>
          <a :href="templateUrl">点我下载模板</a>
        </el-tag>
      </el-form-item>
      <el-form-item label="选择Excel:">
        <!--        文件类型有问题-->
        <el-upload
          ref="upload"
          class="upload"
          accept="application/vnd.ms-excel"
          list-type="application/vnd.ms-excel"
          :action="BASE_API+'edu/subject/addsubject'"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"

          :on-change="fileCheck"
          :file-list="fileList"
          :auto-upload="false"
          :limit="limit"
          :disabled="disabled"
          :on-exceed="fileOver">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px;"
            size="small"
            type="success"
            :disabled="disabled2"
            @click="submitUpload">上传到服务器
          </el-button>
          <div slot="tip" type class="el-upload__tip">

            <span style="color: red;font-size: 16px">
              <i class="el-icon-warning"></i> 请先添加文件再后点击上传
            </span>
          </div>
          <div slot="tip" class="el-upload__tip">只允许上传Excel(.xls或.xlsx后缀)文件</div>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  // import

  export default {
    data() {
      return {
        // 文件类型
        //模板地址
        templateUrl: 'static/模板.xls',
        //是否禁用组件
        disabled: false,
        disabled2: true,
        //上传文件个数
        limit: 1,
        //文件列表
        file: {},
        fileList: [],
        loading: false,
        BASE_API: process.env.BASE_API
      }
    },
    created() {
    },
    methods: {
      submitUpload() {
        // 不可再次点击
        //此处有bug 待修复 非空验证
        this.loading = true
        this.disabled = true
        this.disabled2 = true
        this.$refs.upload.submit()
      },
      fileUploadSuccess() {
        this.loading = false
        this.disabled = false
        this.$message({
          message: '文件上传成功',
          type: 'success'
        })
        this.$router.push({ path: '/subject/list' })
      },
      fileUploadError() {
        this.loading = false
        this.disabled = false
        this.$message.error('文件上传失败')
      },
      //点击删除的回调
      handleRemove(file, fileList) {
        this.disabled2 = true
      },
      //点击文件列表中已上传的文件时的钩子
      handlePreview(file) {
        this.$notify.info({
          title: '提示',
          message: '选择文件按delete键可删除或点击文件末尾的删除按钮'
        })
        // console.log(file)
      },
      //超过限制
      fileOver(file, fileList) {
        this.$notify.error({
          title: '错误',
          message: '超出文件个数,请先删除掉文件'
        })
      },
      //删除之前

      fileCheck(file, fileList) {
        console.log(file)
        if (file.name.endsWith('.xls') || file.name.endsWith('.xlsx')) {
          this.disabled2 = false
          this.$message.success('文件添加成功')
        } else {
          this.disabled2 = true
          this.handleRemove(file, fileList)
          this.$message.error('请添加Excel文件')
        }

      }
    }

  }
</script>

<style scoped>

</style>
